<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jvendor</title><!-- nome que aparece na aba do navegador -->
<link rel="shortcut icon" href="imagens/favicon.ico"><!-- icone que aparece na aba do navegador -->

<style type="text/css">/*Aqui começa a parte de edição em css */

.topo{            /* Cabeçalho da página, com a imagem de fundo*/
width:100%;
height:140px;
background-image:url(imagens/background.gif);
margin-top:-20px; 
box-shadow:0px 1px 9px #1E90FF;
}

.campo-txt-top{   /* aparencia do campo a direita onde aparece R$ valor*/
	border: 1px solid #1E90FF;
	color: #000;
	-webkit-border-radius: 10px;
	border-radius: 5px; 
	height:80px;
	width:250px;
	margin-left: 700px;	
	margin-top:6px;
	font:bold 35px Helvetica, sans-serif;
	font-variant: small-caps;
	font-style:normal;
	box-shadow:0px 1px 9px #fff;
	text-shadow: 2px 2px #D3D3D3;

}
.campo-txt-meio{ /* campo de texto do login e senha*/ 
	border: 1px solid #1E90FF;
	color: #000;
	height:30px;
	background: #fff;
	-webkit-border-radius: 10px;
	border-radius: 5px; 
	margin-left: 90px;	
	font:bold 15px Helvetica, sans-serif;
	font-style:normal;
	box-shadow:0px 1px 9px #000000;

}
.table{ 
	border: 1px solid #1E90FF;
	color: #000;
	background: #fff;
	-webkit-border-radius: 10px;
	border-radius: 5px; 
	box-shadow:0px 1px 9px #000000;
	
}

.texto-meio{  /*fonte e tamanho dos textos do meio da pagina*/
font:bold 20px New Century Schoolbook, serif;
font-style:normal;
font-variant: small-caps;
text-shadow: 1px 1px #333;
}

.texto-top{  /*fonte e tamanho dos textos do top da pagina*/
font:bold 35px New Century Schoolbook, serif;
font-style:normal;
font-variant: small-caps;
text-shadow: 1px 1px #333;
}

.botao {     /*Edita a aparencia do botao*/
  display: inline-block;
  width:300px;
  padding: 15px;
  font:bold 20px Tahoma, Geneva, sans-serif;
  text-shadow: 1px 1px #D3D3D3;
  border:1px solid #d0d0d0;
  border-top-color:#ececec;
  border-bottom-color:#909090;
  color:#000;
  background:#D5EFF7;
  background:-moz-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  background:-webkit-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  
}
.botao:hover {/*Efeito de quando passa o mouse em cima do botao*/
  background:#e3f4fa;
  background:-moz-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
  background:-webkit-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
}

.botaotop {     /*Edita a aparencia do botao*/
  display: inline-block;
  width:100px;
  padding: 5px;
  margin-left:12px;
  font:bold 15px Tahoma, Geneva, sans-serif;
  text-shadow: 1px 1px #D3D3D3;
  border:1px solid #d0d0d0;
  border-top-color:#ececec;
  border-bottom-color:#909090;
  color:#000;
  background:#D5EFF7;
  background:-moz-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  background:-webkit-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  
}
.botaotop:hover {/*Efeito de quando passa o mouse em cima do botao*/
  background:#e3f4fa;
  background:-moz-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
  background:-webkit-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
}
.botaonovo {     /*Edita a aparencia do botao*/
  display: inline-block;
  width:55px;
  padding: 5px;
  margin-left:12px;
  font:bold 15px Tahoma, Geneva, sans-serif;
  text-shadow: 1px 1px #D3D3D3;
  border:1px solid #d0d0d0;
  border-top-color:#ececec;
  border-bottom-color:#909090;
  color:#000;
  background:#D5EFF7;
  background:-moz-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  background:-webkit-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
  
}
.botaonovo:hover {/*Efeito de quando passa o mouse em cima do botao*/
  background:#e3f4fa;
  background:-moz-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
  background:-webkit-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
}
.clear{
padding: 5px;
}
#bottom{

margin-top:100px;
}



</style><!--Aqui termina a parte de edição em css--> 
</head>
<br/>

<div align="left" class="topo"><!--Aqui começa a pagina em html,puxando as classes do css...iniciando pelo topo--> 

<br><br>  <img src="imagens/Jvendorlogo.png" height="80" width="250" style="margin-left:15px;margin-top:-7px;"/> <!--Logo do Jvendor--> 
</div>

<form>
<div class="texto-meio"style="align:right;margin-left:700px; margin-top:-130px; ">Total:</div> 
<input type="text" name="" value="      R$0,00" class="campo-txt-top" style="align:right"/>




<div class="texto-meio" align="center">

<div class="clear"></div>
<input type="text" name="entrada" style="width:800px; margin-top:15px; margin-left:-40px;"/>

<table border="1" class="table" style="margin-top:5px;" >
<tr>
<th height="20px" width="100px" style="text-align:center;"> Quantidade </th>
<th width="600px" style="text-align:center;">Produto</th>
<th width="170px" style="text-align:center;">   Pre&ccedil;o Unit&aacute;rio  </th>
<th width="200px" style="text-align:center;">   Subtotal  </th>
</tr>

<tr>
<td height="20px"><input type="text" name="quantidade" value=""></input></td>
<td><input type="text" name="produto" value="" style="width:600px"></input></td>
<td><input type="text" name="precounitario" value="" width="170px"></input></td>
<td><input type="text" name="subtotal" value="" width="200px"></input></td>

</tr>


</table>
<div class="clear"></div>


<div align="left">
<div id="bottom">
<form method="post">

<table border="1" class="table" >
<tr>
<font style="margin-left:72px;">Desconto (R$):</font>
<font style="margin-left:80px;">Cliente:</font>
<font style="margin-left:230px;">Valor Pago:</font>
<font style="margin-left:110px;">Troco:</font>
</tr>
<div class="clear"></div>

<input type="text" name="descnt" value=" " class="campo-txt-meio" style="width:100px;margin-left:75px;"/>

<select class="campo-txt-meio" style="margin-left:50px;width:150px; margin-left:100px;">
<option name="cliente">Consumidor</option><input type="button" value="Novo" class="botaonovo"></input>

</select>

<input type="text" name="valor" value=" " class="campo-txt-meio" style="width:130px;"/>
<input type="text" name="troco" value=" " class="campo-txt-meio" style="width:130px;"/>

</form>
</div>
<div class="clear"></div>

<div align="right">
<input type="submit" name="inserir" value="Cancelar" class="botao" />
<input type="submit" name="inserir" value="Finalizar Venda" class="botao"/>
</div>
</div>

</html>